<template>
  <div class="container">
    <button @click="isShow = !isShow">切换</button>
    <transition name="fade">
      <div class="target" v-show="isShow"></div>
    </transition>
  </div>
</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue'

const isShow = ref(true)


</script>

<style lang='scss' scoped>
.container {
  // display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  background-color: red;
  transform: translate3d(-50%, -50%, 0);


  .target {
    width: 200px;
    height: 200px;
    background-color: yellow;
    border: 1px solid blue;
  }

  .fade-enter-from,
  .fade-leave-to {
    width: 0;
    height: 0;
    transform: rotate(360deg);
  }

  .fade-enter-active,
  .fade-leave-active {
    transition: all 1.5s ease;
  }


}
</style>